<template>
  <div class="SignIn_new">
    <navigation image_="0" title="好声音大赛" :scrollTop="false" :show="true" v-on:getHeight="getHeight($event)"
      id="header" />
    <!-- 头部信息 -->
    <div class="top_title" :style="{ marginTop: Height + 'px' }">
      <div class="header">
        <img src="../../public/img2/goodvoice/voice_title.png" alt="">
        <img src="../../public/img2/goodvoice/voice_sign_btn.png" alt="" @click="show_model = true,model_type='1'">
      </div>
      <div class="invitation_gift">
        <!-- 海选礼物 -->
        <div class="singer_gift">
          <div class="gift_icon">
            <div></div>
            <img src="../../public/img2/goodvoice/5200.png" alt="">
          </div>
          <div class="gift_center">
            <img src="../../public/img2/goodvoice/voice_gift_text.png" alt="">
          </div>
        </div>
        <!-- 奖池 -->
        <div class="Jackpot">
          <div class="top_jackpot">
            <img src="../../public/img2/goodvoice/jackpo_rule_icon.png" alt=""
              @click="show_model = true,model_type='2'">
            <img src="../../public/img2/goodvoice/jackpo_light_right.png" alt="">
            <img src="../../public/img2/goodvoice/jackpo_light_left.png" alt="">
            <div class="Cumulative">
              <img src="../../public/img2/goodvoice/jackpo_yin_left.png" alt="">
              <div>
                <img src="../../public/img2/goodvoice/jackpo_text.png" alt="">
              </div>
              <img src="../../public/img2/goodvoice/jackpo_yin_right.png" alt="">
            </div>
          </div>
          <img class="voice_decorate_img" src="../../public/img2/goodvoice/voice_decorate_img.png" alt="">
          <div class="Cumulative_">
            <div class="Diamonds">
              <!-- <img src="../../public/img2/goodvoice/diamond_img.png" alt=""> -->
              <span>￥ {{total_money | formatNumber}}</span>
            </div>
            <img class="box_gift" src="../../public/img2/goodvoice/jackpo_box_img.png" alt="">
            <div class="match_rewards">
              <div @click="show_model = true,model_type='3'"><span>赛事奖励</span></div>
              <div @click="show_model = true,model_type='4'"><span>赛事流程</span></div>
            </div>
          </div>

        </div>
        <!-- 免费领取 -->
        <div class="receive">
          <img src="../../public/img2/goodvoice/helpstick_img.png" alt="">
          <div class="text_rule">
            <span>每位玩家每天都可</span>
            <span>免费领取20个应援棒</span>
            <span>为喜欢的歌手在活动页面投票!</span>
          </div>
          <div class="click_receive">
            <img v-if="get_status==0" src="../../public/img2/goodvoice/receive_btn_nor.png" alt=""
              @click="goodVoiceGet">
            <img v-else src="../../public/img2/goodvoice/receive_btn_gray.png" alt="">
          </div>
        </div>


        <!-- 海选时间 -->
        <div class="AuditionTime">
          <div class="SelectionStage">
            <div v-for="item,index in step_list" :key="index" :class="index+1 == step?'bg_cur'+(index*1+1*1)*1:''"
              @click="keyword='';cur_tab(index+1);">
              <img :src="require('../../public/img2/goodvoice/' + (index+1) + '.png')" />
              <div class="time_some">{{item.start_date}}-{{item.end_date}}</div>
              <span>{{item.step_subtitle}}</span>
            </div>
          </div>
          <!-- 倒计时 -->
          <div class="countDown">
            <van-count-down :time="showTime" @finish="SignIn_new">
              <template v-slot="timeData" v-if="isStart_time">
                距离{{step_list[step-1].step_name}}结束还有
                <div class="item">{{ timeData.days|formatDate }}</div>天
                <div class="item">{{ timeData.hours|formatDate }}</div>时
                <div class="item">{{ timeData.minutes|formatDate }}</div>分
              </template>
              <!-- <template v-else>
                {{step_list[step-1].step_name}}已结束
              </template> -->
              <template v-slot="timeData" v-else>
                {{step_list[step-1].step_name}}已结束
                <div class="item">{{ timeData.days|formatDate }}</div>天
                <div class="item">{{ timeData.hours|formatDate }}</div>时
                <div class="item">{{ timeData.minutes|formatDate }}</div>分
              </template>

            </van-count-down>
          </div>
        </div>

        <!-- 排行榜 -->
        <div class="rank_list">
          <div class="top_jackpot">
            <img src="../../public/img2/goodvoice/jackpo_light_left.png" alt="">
            <img src="../../public/img2/goodvoice/jackpo_light_right.png" alt="">
            <!-- <img src="../../public/img2/goodvoice/jackpo_light_left.png" alt=""> -->
            <div class="Cumulative">
              <img src="../../public/img2/goodvoice/jackpo_yin_left.png" alt="">
              <div>
                <img v-if="step==1" src="../../public/img2/goodvoice/haixuan_list_text.png" alt="">
                <img v-if="step==2" src="../../public/img2/goodvoice/yusai_text.png" alt="">
                <img v-if="step==3" src="../../public/img2/goodvoice/fusai_text.png" alt="">
                <img v-if="step==4" src="../../public/img2/goodvoice/juesai_text.png" alt="">
                <img v-if="step==5" src="../../public/img2/goodvoice/zongjuesai_text.png" alt="">
              </div>
              <img src="../../public/img2/goodvoice/jackpo_yin_right.png" alt="">
            </div>
          </div>
          <img class="voice_decorate_img" src="../../public/img2/goodvoice/list_decorate_img.png" alt="">
          <div class="seach_" v-if="step != 5">
            <div class="ipt_btn">
              <input type="text" v-model="keyword" placeholder="输入声贝ID、用户昵称进行搜索" @keyup.enter="cur_tab(step)">
              <div class="sousuo" @click="cur_tab(step)">搜索</div>
            </div>
            <div class="stage_" v-if="step!=1">
              <div class="flei_">
                <van-popover v-model="showPopover" trigger="click">
                  <div class="tab_ui">
                    <div :class="sort==2?'active_xuanzhong':''" @click="tab_avtive_index(2)">
                      按分数
                      <img v-if="sort==2" src="../../public/img2/goodvoice/list_ok_icon.png" alt="">
                    </div>
                    <div :class="sort==1?'active_xuanzhong':''" @click="tab_avtive_index(1)">
                      按票数
                      <img v-if="sort==1" src="../../public/img2/goodvoice/list_ok_icon.png" alt="">
                    </div>
                  </div>
                  <template #reference>
                    <span>{{sort==2?'按分数':'按票数'}}</span>
                    <img src="../../public/img2/goodvoice/list_more_icon.png" alt="">
                  </template>
                </van-popover>
              </div>
            </div>
          </div>
          <div class="rank_box" v-if="step==1 || step==2">
            <div class="rank_100_box" v-if="list.length>0">
              <div v-for="item,index in list" :key="index" :class="step==1?'single_box single_boxstep1':'single_box'">
                <div class="center_box_tank">
                  <div class="pm_pingf">
                    <div>{{item.rank}}</div>
                    <span>{{item.total_score}}分</span>
                  </div>
                  <div class="box_header_bg" @click="open_usrt(item.user_id)">
                    <img src="../../public/img2/goodvoice/list_person_frame.png" alt="">
                    <img :src="item.head_pic" alt=""
                      onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';">
                  </div>
                  <span class="name_slice">{{splice_(item.nickname)}}</span>
                  <div class="voice_mp3" @click="playvoice(index)">
                    <audio :ref="'middle'+ index" :src="item.song_url" @pause="onPause" @play="onPlay"
                      @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata"></audio>
                    <img v-if="item.play" src="../../public/img2/goodvoice/list_open_icon.png" alt="">
                    <img v-else src="../../public/img2/goodvoice/list_stop_icon.png" alt="">
                    <div>
                      <van-notice-bar :scrollable="item.play" :text="item.song_name" speed='44' />
                      <!-- {{splice_2(item.song_name)}} -->
                    </div>
                  </div>
                  <div class="Help_voice" v-if="step !=1">
                    <div>应援</div>
                    <span>{{item.vote_num}}</span>
                  </div>
                  <div v-if="stepPre == step && step !=1" class="btn_vote" @click="btn_vote(item,index)">投票</div>
                  <div v-if="stepPre != step && step !=1" class="btn_vote" @click="btn_vote2">投票</div>
                </div>
              </div>
            </div>
            <div class="not_list" v-else>
              暂无数据
            </div>
          </div>
          <div class="rank_box_nth2" v-else-if="step==3 || step==4">
            <div class="rank_32_box" v-if="list.length>0">
              <div class="single_box_32" v-for="item,index in list" :key="index">
                <div class="center_32">
                  <div class="header_image_box32" @click="open_usrt(item.user_id)">
                    <img src="../../public/img2/goodvoice/voice_gift_frame.png" alt="">
                    <img :src="item.head_pic" alt=""
                      onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';">
                  </div>
                  <div class="name_wenben_box">
                    <span>{{splice_2(item.nickname)}}</span>
                    <div class="voice_mp3" @click="playvoice(index)">
                      <audio :ref="'middle'+ index" :src="item.song_url" @pause="onPause" @play="onPlay"
                        @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata"></audio>
                      <img v-if="item.play" src="../../public/img2/goodvoice/list_open_icon.png" alt="">
                      <img v-else src="../../public/img2/goodvoice/list_stop_icon.png" alt="">
                      <div>
                        <!-- <span>{{splice_2(item.song_name)}}</span> -->
                        <van-notice-bar :scrollable="item.play" :text="item.song_name" speed='44' />
                      </div>
                    </div>
                    <div class="Help_voice">
                      <div>应援</div>
                      <span>{{item.vote_num}}</span>
                    </div>
                  </div>
                  <div v-if="stepPre == step" class="btn_vote" @click="btn_vote(item,index)">投票</div>
                  <div v-else class="btn_vote" @click="btn_vote2">投票</div>
                  <!-- <div v-else class="btn_vote btn_vote2">投票结束</div> -->
                </div>
                <div class="rank_def">
                  <div>{{item.rank}}</div>
                  <span>{{item.total_score}}分</span>
                </div>
              </div>
            </div>
            <div class="not_list" v-else>
              暂无数据
            </div>
          </div>
          <div class="rank_box_nth3" v-else>
            <template v-if="list.length>0">
              <div class="rank3_of_type" v-for="item,index in list" :key="index">
                <img v-if="index == 0" src="../../public/img2/goodvoice/list_no.1_frame.png" alt="">
                <img v-if="index == 1" src="../../public/img2/goodvoice/list_no.2_frame.png" alt="">
                <img v-if="index == 2" src="../../public/img2/goodvoice/list_no.3_frame.png" alt="">
                <div :class="index==1?'center_list_nor center_list_nor2':'center_list_nor'">
                  <div class="img_back" @click="open_usrt(item.user_id)">
                    <img src="../../public/img2/goodvoice/person_frame.png" alt="">
                    <div>
                      <van-image :src="item.head_pic" width="100%" height="100%" alt="1" fit="cover"
                        onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';" />
                    </div>
                  </div>
                  <div class="infor_list">
                    <span>{{item.total_score}}分</span>
                    <span>{{splice_(item.nickname)}}</span>
                    <div class="voice_mp3" @click="playvoice(index)">
                      <audio :ref="'middle'+ index" :src="item.song_url" @pause="onPause" @play="onPlay"
                        @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata"></audio>
                      <img v-if="item.play" src="../../public/img2/goodvoice/list_open_icon.png" alt="">
                      <img v-else src="../../public/img2/goodvoice/list_stop_icon.png" alt="">
                      <div>
                        <van-notice-bar :scrollable="item.play" :text="item.song_name" speed='44' />
                        <!-- <span>{{splice_2(item.song_name)}}</span> -->
                      </div>
                    </div>
                    <div class="Help_voice">
                      <div>应援</div>
                      <span>{{item.vote_num}}</span>
                    </div>
                    <div v-if="stepPre == step" class="btn_vote" @click="btn_vote(item,index)">投票</div>
                    <!-- <div v-else class="btn_vote btn_vote2">投票结束</div> -->
                    <div v-else class="btn_vote" @click="btn_vote2">投票</div>
                  </div>
                </div>
                <div class="text_list_ van-ellipsis">{{item.origin_sign}}</div>
              </div>
            </template>
            <template v-else>
              <div class="not_list">
                暂无数据
              </div>
            </template>
          </div>

        </div>

        <!-- 嘉宾 -->
        <div class="Jackpot distinguished">
          <div class="top_jackpot">
            <img src="../../public/img2/goodvoice/guest_standard_icon.png" alt=""
              @click="show_model = true,model_type='5'">
            <img src="../../public/img2/goodvoice/jackpo_light_right.png" alt="">
            <img src="../../public/img2/goodvoice/jackpo_light_left.png" alt="">
            <div class="Cumulative">
              <img src="../../public/img2/goodvoice/jackpo_yin_left.png" alt="">
              <div>
                <img src="../../public/img2/goodvoice/guest_text.png" alt="">
              </div>
              <img src="../../public/img2/goodvoice/jackpo_yin_right.png" alt="">
            </div>
          </div>
          <img class="voice_decorate_img" src="../../public/img2/goodvoice/guest_decorate_img.png" alt="">
          <div :class="'box_jiabin box_jiabin'+jury_list.length">
            <div class="list_dan" v-for="item,index in jury_list" :key="index">
              <div class="header_image">
                <img src="../../public/img2/goodvoice/guest_frame.png" alt="">
                <img :src="item.head_pic" alt=""
                  onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';">
              </div>
              <span>{{item.nickname}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show_model" :close-on-click-overlay="false">
      <div class="block">
        <div class="close" @click="show_model = false">
          <img src="../../public/img2/goodvoice/popup_close_icon.png" alt="">
        </div>
        <div class="center_rule">
          <div class="top_jackpot">
            <img src="../../public/img2/goodvoice/jackpo_light_left.png" alt="">
            <img src="../../public/img2/goodvoice/jackpo_light_right.png" alt="">
            <div class="Cumulative">
              <img src="../../public/img2/goodvoice/jackpo_yin_left.png" alt="">
              <div>
                <img v-if="model_type==1" src="../../public/img2/goodvoice/baoming_text.png" alt="">
                <img v-if="model_type==2" src="../../public/img2/goodvoice/rule_text.png" alt="">
                <img v-if="model_type==3" src="../../public/img2/goodvoice/jiangli_text.png" alt="">
                <img v-if="model_type==4" src="../../public/img2/goodvoice/liucheng_text.png" alt="">
                <img v-if="model_type==5" src="../../public/img2/goodvoice/baiozhun_text.png" alt="">
              </div>
              <img src="../../public/img2/goodvoice/jackpo_yin_right.png" alt="">
            </div>
          </div>
          <img class="voice_decorate_img" src="../../public/img2/goodvoice/baoming_decorate_img.png" alt="">
          <div class="center_rule_message" v-if="model_type==1">
            <div class="wenben_mss">
              <span>1、喜欢唱歌,表现自我的小伙伴</span>
              <span>2、有音乐基础的小伙伴有加分 </span>
              <span>3、不同曲风的歌手优先录用</span>
              <span>4、有充分的时间,保证后续比赛不间断</span>
              <span>5 、积极配合官方完成比赛</span>
            </div>
            <div class="image_erwm">
              <img src="../../public/img2/goodvoice/erweima_img.png" alt="">
            </div>
            <div class="contact_kefu">
              联系客服报名参与海选
            </div>
            <div class="copy_kefu" v-clipboard:copy="copyUrl1" v-clipboard:success="onCopy" v-clipboard:error="onError">
              <span>客服微信号:{{copyUrl1}}</span>
              <img src="../../public/img2/goodvoice/copy_icon.png" alt="">
            </div>
          </div>
          <div class="mode_type2" v-if="model_type==2">
            <span>奖池基础金额为5000元</span>
            <span>每个应援棒价格10钻</span>
            <span>用户购买应援棒支持喜欢的歌手</span>
            <span>奖池则增加0.1元。</span>
          </div>
          <div class="mode_type3" v-if="model_type==3">
            <div class="rangk_01">
              <div class="bg_rank">
                <img src="../../public/img2/goodvoice/no.1_lab.png" alt="">
              </div>
              <div class="gift_num_list">
                <div class="list_num" v-for="item,index in rank1_list" :key="index">
                  <div class="nor_gift">
                    <img :src="item.icon" alt="">
                    <div class="xiand" v-if="item.isShow">限</div>
                  </div>
                  <div class="name_gift">
                    <span>{{item.name}}</span>
                    <span>{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="rangk_01">
              <div class="bg_rank">
                <img src="../../public/img2/goodvoice/no.2_lab.png" alt="">
              </div>
              <div class="gift_num_list">
                <div class="list_num list_num2" v-for="item,index in rank2_list" :key="index">
                  <div class="nor_gift">
                    <img :src="item.icon" alt="">
                    <div class="xiand" v-if="item.isShow">限</div>
                  </div>
                  <div class="name_gift">
                    <span>{{item.name}}</span>
                    <span>{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="rangk_01">
              <div class="bg_rank">
                <img src="../../public/img2/goodvoice/no.3_lab.png" alt="">
              </div>
              <div class="gift_num_list">
                <div class="list_num list_num2" v-for="item,index in rank3_list" :key="index">
                  <div class="nor_gift">
                    <img :src="item.icon" alt="">
                    <div class="xiand" v-if="item.isShow">限</div>
                  </div>
                  <div class="name_gift">
                    <span>{{item.name}}</span>
                    <span>{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="rangk_01">
              <div class="bg_rank bg_rank2">
                <img src="../../public/img2/goodvoice/16_frame.png" alt="">
                <span>好声音16强</span>
              </div>
              <div class="gift_num_list">
                <div class="list_num list_num2" v-for="item,index in rank4_list" :key="index">
                  <div class="nor_gift">
                    <img :src="item.icon" alt="">
                    <div class="xiand" v-if="item.isShow">限</div>
                  </div>
                  <div class="name_gift">
                    <span>{{item.name}}</span>
                    <span>{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="rangk_01">
              <div class="bg_rank bg_rank2">
                <img src="../../public/img2/goodvoice/16_frame.png" alt="">
                <span>好声音32强</span>
              </div>
              <div class="gift_num_list">
                <div class="list_num list_num2" v-for="item,index in rank5_list" :key="index">
                  <div class="nor_gift">
                    <img :src="item.icon" alt="">
                    <div class="xiand" v-if="item.isShow">限</div>
                  </div>
                  <div class="name_gift">
                    <span>{{item.name}}</span>
                    <span>{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mode_type4" v-if="model_type==4">
            <div class="progress">
              <div>
                <div></div>
              </div>
              <div>
                <div></div>
              </div>
              <div>
                <div></div>
              </div>
              <div>
                <div></div>
              </div>
              <div>
                <div></div>
              </div>
              <div>
                <div></div>
              </div>
            </div>
            <div class="rule_text">
              <div class="cengci cengci1">
                <img src="../../public/img2/goodvoice/haixuan.png" alt="">
                <span>报名参与海选,入围有礼,等你来唱</span>
              </div>
              <div class="cengci">
                <img src="../../public/img2/goodvoice/baiqiang.png" alt="">
                <span>100位优秀歌手,10天左右</span>
              </div>
              <div class="cengci">
                <img src="../../public/img2/goodvoice/32.png" alt="">
                <span>排名制,每人1首演唱歌曲</span>
              </div>
              <div class="cengci">
                <img src="../../public/img2/goodvoice/16.png" alt="">
                <span>pk制,每人1首演唱歌曲</span>
              </div>
              <div class="cengci">
                <img src="../../public/img2/goodvoice/three.png" alt="">
                <span>排名制,每人2首演唱歌曲</span>
              </div>
              <div class="cengci">
                <img src="../../public/img2/goodvoice/guanjun.png" alt="">
                <span>1号pk2号,2号pk3号,1号pk3号每人3首决胜负</span>
              </div>
            </div>
          </div>
          <div class="mode_type5" v-if="model_type==5">
            <div class="rank_pangm">
              <img src="../../public/img2/goodvoice/haixuan.png" alt="">
              <span>由官方评委打分录用</span>
            </div>
            <div class="rank_pangm">
              <img src="../../public/img2/goodvoice/32.png" alt="">
              <span>官方打分（40%）+观众投票（60%）录取前32名</span>
            </div>
            <div class="rank_pangm">
              <img src="../../public/img2/goodvoice/16.png" alt="">
              <span>官方打分（25%）+观众投票（50%）+ 嘉宾打分（25%）
              </span>
            </div>
            <div class="rank_pangm">
              <img src="../../public/img2/goodvoice/three.png" alt="">
              <span>官方打分（20%）+观众投票（40%）
                + 嘉宾打分（20%）+ 礼物得分（20%）</span>
            </div>
            <div class="rank_pangm">
              <img src="../../public/img2/goodvoice/guanjun.png" alt="">
              <span>官方打分（20%）+观众投票（40%）
                + 嘉宾打分（20%）+ 礼物得分（20%）</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="vote_mode" :close-on-click-overlay="false">
      <div class="vote_toppiao">
        <div class="close" @click="vote_mode = false;num_yyb=''">
          <img src="../../public/img2/goodvoice/popup_close_icon.png" alt="">
        </div>
        <div class="center_vote">
          <div class="heder_top">确认投票给{{splice_(user_item.nickname)}}吗？</div>
          <div class="ipt_num">
            <div class="ipt_ba">
              <input type="number" placeholder="请输入赠送的应援棒数量" v-model="num_yyb"
                onkeyup="value=value.replace(/[^\d]+/g,'')">
            </div>
            <div class="btn_all" @click="num_yyb = gift_num">全部</div>
          </div>
          <div class="all_surplus">
            <span>当前剩余:{{gift_num}}个</span>
            <!-- <div @click="torecharge">购买应援棒></div> -->
            <div @click="buy_model = true">购买应援棒></div>
          </div>
          <div class="btn_determine" @click="get_VoiceVote">确定</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="buy_model" :close-on-click-overlay="false">
      <div class="buy_">
        <div class="close" @click="buy_model = false;num_buy=1">
          <img src="../../public/img2/goodvoice/popup_close_icon.png" alt="">
        </div>
        <div class="center_modelo">
          <div class="heder_top">购买应援棒</div>
          <span>10钻=1个应援棒</span>
          <div class="Stepper">
            <div class="left_step">
              <div class="stepp" @click="num_buy--">-</div>
              <div class="ipt_a"><input type="number" onkeyup="value=value.replace(/[^\d]+/g,'')" v-model="num_buy">
              </div>
              <div class="stepp" @click="num_buy++">+</div>
            </div>
            <div class="right_all" @click="all_">全部</div>
          </div>
          <div class="spend_zuans">总计花费 <span>{{num_buy*10}}</span> 钻</div>
          <div class="surplus_">
            <div class="syu_zuans">
              <div>剩余钻石</div>
              <span>{{diamond_money}}</span>
              <div @click="open_charge"><span>+</span></div>
            </div>
            <div class="quer_ipt" @click="buy_VoiceBuy">
              确认
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from "../../components/navigation";
  import wx from 'weixin-js-sdk'
  export default {
    data() {
      return {
        isStart_time: true, //活动倒计时
        num_buy: 1, //购买数量
        num_yyb: '', //应援榜
        buy_model: false, //购买
        model_type: '',
        copyUrl1: 'xunyinjiaoyou',
        show_model: false, //报名等弹窗
        showPopover: false,
        keyword: '', //搜索内容
        sort: 2, //1分数2票数
        play_index: '', //当前播放下标
        Height: 48,
        audio: {},
        vote_mode: false, //投票model
        list: [], //排名数据
        showTime: '', //倒计时
        step: '1', //阶段
        stepPre: '1', //现在阶段
        gift_num: '', //应援棒数量
        diamond_money: '', //钻石数
        get_status: '', //今日是否领取：0-未领取、1-已领取
        total_money: '', //奖池金额
        step_list: [{
          "step": 1,
          "step_name": "海选赛",
          "step_subtitle": "N进100",
          "start_time": 1655783768,
          "end_time": 1656561372,
          "start_date": "06.21",
          "end_date": "06.30"
        }, {
          "step": 2,
          "step_name": "预赛",
          "step_subtitle": "100进32",
          "start_time": 1656647800,
          "end_time": 1656907005,
          "start_date": "07.01",
          "end_date": "07.04"
        }, {
          "step": 3,
          "step_name": "复赛",
          "step_subtitle": "32进16",
          "start_time": 1656907026,
          "end_time": 1657079830,
          "start_date": "07.04",
          "end_date": "07.06"
        }, {
          "step": 4,
          "step_name": "决赛",
          "step_subtitle": "16进3",
          "start_time": 1655697449,
          "end_time": 1657166255,
          "start_date": "06.20",
          "end_date": "07.07"
        }, {
          "step": 5,
          "step_name": "总决赛",
          "step_subtitle": "冠军之夜",
          "start_time": 1657166275,
          "end_time": 1657252678,
          "start_date": "07.07",
          "end_date": "07.08"
        }], //赛程列表
        keyword: '', //关键字
        scroll: '',
        isone: true, //第一次滚动
        jury_list: [], //嘉宾
        user_item: {}, //被投投票用户信息
        user_index: '', //被投用户下标
        rank1_list: [
          {
            name: '冠军头像框',
            value: "",
            icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
            isShow: false
          },
          {
            name: '冠军勋章',
            value: "",
            icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
            isShow: false
          },
          {
            name: '奖池奖励',
            value: "",
            icon: require('../../public/img2/goodvoice/box60.png'),
            isShow: false
          },
          {
            name: '热门推荐',
            value: "",
            icon: require('../../public/img2/goodvoice/gift_tuijian_img.png'),
            isShow: false
          },
          {
            name: '冠军奖杯',
            value: "",
            icon: require('../../public/img2/goodvoice/jiangbei1.png'),
            isShow: false
          },
        ],
        rank2_list: [{
            name: '亚军头像框',
            value: "",
           icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
            isShow: false
          },
          {
            name: '亚军勋章',
            value: "",
            icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
            isShow: false
          },
          {
            name: '奖池奖励',
            value: "",
            icon: require('../../public/img2/goodvoice/box20.png'),
            isShow: false
          },
          {
            name: '亚军奖杯',
            value: "",
            icon: require('../../public/img2/goodvoice/jiangbei2.png'),
            isShow: false
          },
        ],
        rank3_list: [{
            name: '季军头像框',
            value: "",
            icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
            isShow: false
          },
          {
            name: '季军勋章',
            value: "",
            icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
            isShow: false
          },
          {
            name: '奖池奖励',
            value: "",
            icon: require('../../public/img2/goodvoice/box10.png'),
            isShow: false
          },
          {
            name: '季军奖杯',
            value: "",
            icon: require('../../public/img2/goodvoice/jiangbei3.png'),
            isShow: false
          },
        ],
        rank4_list: [{
            name: '好声音头像框',
            value: "",
           icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
            isShow: false
          },
          {
            name: '好声音勋章',
            value: "",
            icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
            isShow: false
          },
          {
            name: '限定礼物',
            value: "价值1880钻",
            icon: require('../../public/img2/goodvoice/box60.png'),
            isShow: true
          },
          {
            name: '16强奖杯',
            value: "",
            icon: require('../../public/img2/goodvoice/jiangbei4.png'),
            isShow: false
          },
        ],
        rank5_list: [{
            name: '好声音头像框',
            value: "",
            icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
            isShow: false
          },
          {
            name: '好声音勋章',
            value: "",
           icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
            isShow: false
          },
          {
            name: '限定礼物',
            value: "价值1000钻",
            icon: require('../../public/img2/goodvoice/box60.png'),
            isShow: true
          },
          {
            name: '32强奖杯',
            value: "",
            icon: require('../../public/img2/goodvoice/jiangbei5.png'),
            isShow: false
          },
        ],
      };
    },
    filters: {
      formatNumber(num) {
        return num.toString().replace(/\d+/, function (n) {
          return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
        })
      },
      formatDate(time) {
        if (time < 10) {
          return '0' + time
        } else {
          return time
        }
      },
    },
    watch: {
      num_yyb: {
        handler: function () {
          if (this.num_yyb > this.gift_num) {
            this.num_yyb = this.gift_num;
            Toast('当前剩余' + this.gift_num)
          }
        },
        deep: true,
      },
      num_buy: {
        handler: function () {
          if (this.num_buy < 0) {
            this.num_buy = 0;
            Toast('请输入正确数量')
          } else if (this.num_buy * 10 > this.diamond_money) {
            this.num_buy = Math.floor(this.diamond_money / 10);
            Toast('钻石不足')
          }
        },
        deep: true,
      },
      keyword: {
        handler: function () {
          if (this.keyword == '') {
            this.cur_tab(this.step);
          }
        },
        deep: true,
      }
    },
    components: {
      navigation,
    },
    created() {
      this.good_voice()
    },

    mounted() {

      // 监听滚动事件
      var u = navigator.userAgent;
      var ua = navigator.userAgent.toLowerCase(); //微信小程序 
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // Toast('微信')
        this.Height = 0;
      } else {
        //console.log('app')
      }
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleScroll() {
        //或者使用document.querySelector('.class或者#id').scrollTop
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop
        if (this.scroll > 400 && this.isone) {
          this.cur_tab(this.step)
          this.isone = false;
        }
      },
      torecharge() {
        if (window.isWeixin) {
          wx.miniProgram.navigateTo({
            url: "/pages/recharge/recharge",
          });
        } else {
          if (window.isiOS) {
            window.webkit.messageHandlers.pageJumpRecharge.postMessage({});
          } else {
            app.pageJumpRecharge();
          }
        }
      },
      SignIn_new() {
        console.log('结束');
      },
      onCopy(e) {
        Toast("复制成功");
      },
      onError(e) {
        Toast("复制失败");
      },
      splice_(value) {
        let slice2 = "";
        if (value) {
          if (value.length > 5) {
            slice2 = value
            slice2 = slice2.slice(0, 4)
            return slice2 + '...';
          } else {
            return value
          }
        }
      },
      splice_2(value) {
        let slice2 = "";
        if (value) {
          if (value.length > 8) {
            slice2 = value
            slice2 = slice2.slice(0, 7)
            return slice2 + '...';
          } else {
            return value
          }
        }
      },
      // errorImg(event) {
      //   console.log(e);
      //   // this.list[index].head_pic = "http://img.xunyinjiaoyou.com/upload/avatar/202203/25/68134_1648200030.jpg";
      //   // img.onerror = null; //防止闪图

      //   var img = event.srcElement;
      //   img.src = "http://img.xunyinjiaoyou.com/upload/avatar/202203/25/68134_1648200030.jpg";
      //   img.onerror = null; //解绑onerror事件
      // },
      all_() {
        this.num_buy = Math.floor(this.diamond_money / 10)
      },
      cur_tab(index) {
        if (index > this.stepPre) {
          return Toast("未开始")
        }
        this.step = index;
        let arys = {
          step: this.step,
          sort: this.sort,
          keyword: this.keyword,
        }; //参数
        let url = "/activity/goodVoiceRank";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            for (var i = 0; i < res.data.result.rank_list.length; i++) {
              res.data.result.rank_list[i].play = false;
            }
            this.list = res.data.result.rank_list;
            this.jury_list = res.data.result.jury_list;


            let step_date = this.step - 1;
            const nowDate = new Date()
            const nowtime = parseInt(nowDate.getTime())
            if (nowtime > this.step_list[step_date].end_time * 1000) {
              // console.log('活动已结束');
              this.isStart_time = false;
              this.showTime = this.step_list[step_date].end_time * 1000 - nowtime; //倒计时
            } else {
              // console.log('开始');
              this.isStart_time = true;
              this.showTime = this.step_list[step_date].end_time * 1000 - nowtime; //倒计时
            }
          }
        })

      },
      img_sele(index) {
        return '../../public/img2/goodvoice/' + index + '.png'
      },
      //买票
      buy_VoiceBuy() {
        if (this.num_buy < 1) {
          return Toast('数量不能为空')
        }
        let arys = {
          num: this.num_buy
        }; //参数
        let url = "/activity/goodVoiceBuy";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.gift_num = res.data.result.gift_num;
            this.diamond_money = res.data.result.diamond_money;

            this.num_buy = '1';
            this.buy_model = false;
          }
          Toast(res.data.text)
        })
      },
      //投票
      get_VoiceVote() {
        if (this.num_yyb < 1) {
          return Toast('数量不能为空')
        }
        let arys = {
          memberId: this.user_item.user_id,
          num: this.num_yyb,
          source: window.isiOS ? 'ios' : 'android',
        }; //参数
        let url = "/activity/goodVoiceVote";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.gift_num = res.data.result.my_num;
            this.diamond_money = res.data.result.userMoney;

            this.num_yyb = '';
            this.vote_mode = false;

            if (this.sort == 1) {
              this.cur_tab(this.step)
            } else {
              this.list[this.user_index].vote_num += res.data.result.num * 1
              // console.log(this.list[this.user_index].vote_num);
            }
          }
          // console.log(res.data.result);
          Toast(res.data.text)
        })
      },
      tab_avtive_index(index) {
        this.sort = index;
        this.showPopover = false;
        this.cur_tab(this.step)
      },
      btn_vote(item, index) {
        this.vote_mode = true;
        this.user_item = item;
        this.user_index = index;
        console.log(item);
      },
      btn_vote2() {
        Toast('已结束')
      },
      playvoice(index) {
        this.play_index = index;
        var middle = 'middle' + index;
        middle = this.$refs[middle][0];
        if (middle.paused) {
          // 切换播放中的css样式
          this.list.some((item, index2) => {
            item.play = false;
            var middle = 'middle' + index2;
            middle = this.$refs[middle][0];
            middle.pause()
          })
          // middle.play()
          let playPromise = middle.play()
          if (playPromise !== undefined) {
            playPromise.then((res) => {
              middle.play()
              this.list[index].play = true;
            }).catch(() => {

            })
          }
        } else {
          // 切换未播放的css样式
          middle.pause()
          this.list[index].play = false;
        }
      },
      // 当音频播放
      onPlay() {
        this.audio.playing = true;
        this.list[this.play_index].play = true;
        console.log('当音频播放');
      },
      // 当音频暂停
      onPause() {
        this.audio.playing = false;
        this.list[this.play_index].play = false;
        console.log('当音频暂停');
      },
      // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
      onTimeupdate(res) {
        this.audio.currentTime = res.target.currentTime;
      },
      // 当加载语音流元数据完成后，会触发该事件的回调函数
      // 语音元数据主要是语音的长度之类的数据
      onLoadedmetadata(res) {
        this.audio.maxTime = parseInt(res.target.duration)
      },
      good_voice() {
        let arys = {}; //参数
        let url = "/activity/goodVoiceIndex";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.step = res.data.result.step; //阶段
            this.stepPre = res.data.result.step; //阶段
            this.gift_num = res.data.result.gift_num; //应援棒数量
            this.diamond_money = res.data.result.diamond_money; //应援棒数量
            this.get_status = res.data.result.get_status; //今日是否领取：0-未领取、1-已领取
            this.total_money = res.data.result.total_money; //奖池金额
            this.step_list = res.data.result.step_list; //赛程列表

            let step_date = res.data.result.step - 1;
            const nowDate = new Date()
            const nowtime = parseInt(nowDate.getTime())
            this.showTime = res.data.result.step_list[step_date].end_time * 1000 - nowtime; //倒计时

          }
        })
      },
      goodVoiceGet() {
        let arys = {}; //参数
        let url = "/activity/goodVoiceGet";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.gift_num = res.data.result.gift_num; //应援棒数量
            this.get_status = 1; //应援棒数量
          }
          Toast(res.data.text)
        })
      },
      //点击头像进入个人主页
      open_usrt(user) {
        if (window.isWeixin) {
          wx.miniProgram.navigateTo({
            url: "/pages/me/me?memberId=" + user,
          });
        } else {
          if (window.isiOS) {
            console.log("isiOS环境");
            window.webkit.messageHandlers.openProfile.postMessage({
              userId: user,
            });
          } else {
            console.log("安卓环境");
            app.openProfile(user);
          }
        }
      },
      open_charge() {
        if (window.isWeixin) {
          wx.miniProgram.navigateTo({
            url: "/pages/recharge/recharge"
          }); //充值
        } else {
          if (window.isiOS) {
            console.log("isiOS环境");
            window.webkit.messageHandlers.pageJumpRecharge.postMessage({})
          } else {
            console.log("安卓环境");
            app.pageJumpRecharge();
          }
        }
      },
      getHeight(height) {
        this.Height = height;
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .px (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  // .top_title {
  //   width: 100vw;

  //   audio {
  //     width: 10vw;
  //     height: 10vw;
  //   }

  // }
  .top_title {
    width: 100vw;
    overflow: hidden;
    background: #06006B;
  }

  .header {
    width: 100vw;
    .px(866, height);
    background: url("../../public/img2/goodvoice/voice_bg.png") no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;

    >img:nth-of-type(1) {
      .px(786);
      .px(544, height);
      .px(70, margin-top)
    }

    >img:nth-of-type(2) {
      .px(226);
      .px(88, height);
      position: absolute;
      .px(24, top);
      .px(8, right)
    }
  }

  .invitation_gift {
    width: 100vw;
    .px(-60, margin-top);
    position: relative;

    .singer_gift {
      .px(776);
      margin: @auto;
      .px(370, height);
      .px(156, margin-bottom);
      background: url("../../public/img2/goodvoice/voice_gift_bg.png") no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;

      .gift_icon {
        .px(188);
        .px(274, height);
        .px(54, margin-left);
        display: flex;
        flex-direction: column;

        >div {
          .px(188);
          .px(196, height);
          background: url("../../public/img2/goodvoice/list_person_frame.png") no-repeat;
          background-size: cover;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 88%;
          }
        }

        >img {
          .px(184);
          .px(18, margin-top)
        }
      }

      .gift_center {
        .px(432);
        .px(38, margin-left);

        img {
          width: 100%;
        }
      }
    }

    .receive {
      .px(828);
      .px(368, height);
      background: url("../../public/img2/goodvoice/voice_receive_bg.png") no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .px(142, margin-bottom);

      >img {
        .px(188);
        .px(-54, margin-top);
      }

      .text_rule {
        display: flex;
        flex-direction: column;
        .fs(30);
        .px(50, line-height);
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFEFFF;
        .px(34, margin-left);
        .px(-54, margin-top);

        >span:nth-of-type(2) {
          color: #FDFB48;
        }
      }

      .click_receive {
        position: absolute;
        .px(406);
        .px(-20, bottom);

        >img {
          width: 100%;
        }
      }
    }

    .Jackpot {
      .px(768);
      .px(746, height);
      background: #34029F;
      border: 2px solid #FFFFFF;
      .px(20, border-radius);
      margin: @auto;
      .px(34, margin-bottom);
      position: relative;
      box-shadow: 3px 3px 3px #173fe5, -3px -3px 3px #173fe5;

      .top_jackpot {
        position: relative;
        z-index: 2;
        display: flex;
        .px(146, height);
        width: 100%;
        align-items: center;
        justify-content: center;
        .px(-76, margin-top);

        >img:nth-of-type(1) {
          position: absolute;
          left: -3%;
          top: 0%;
          .px(152);
          z-index: 2;
        }

        >img:nth-of-type(2) {
          position: absolute;
          right: -3%;
          top: 0%;
          .px(146);
        }

        >img:nth-of-type(3) {
          position: absolute;
          left: -3%;
          top: 0%;
          .px(146);
        }

        .Cumulative {
          .px(580);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            position: absolute;
            left: 0%;
            .px(130);
          }

          >img:nth-of-type(2) {
            .px(130);
            position: absolute;
            right: 0%;
          }

          >div {
            .px(410);
            .px(120, height);
            background: url("../../public/img2/goodvoice/voice_jackpo_title.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            >img {
              width: fit-content;
              .px(258)
            }
          }


        }
      }

      .voice_decorate_img {
        position: absolute;
        .px(760);
        .px(30, top);
      }

      .Cumulative_ {
        display: flex;
        flex-direction: column;
        .px(600);
        justify-content: center;
        position: relative;
        margin: @auto;
        .px(40, margin-top);

        .Diamonds {
          width: 100%;
          .px(74, height);
          display: flex;
          justify-content: center;
          align-items: center;

          >img {
            .px(76);
            .px(30, margin-right);
          }

          >span {
            background: linear-gradient(0deg, #F8E596 0.68359375%, #FA8A0A 99.5849609375%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: PingFang SC;
            font-weight: 600;
            .fs(80);
            color: #FEFEFE;
          }
        }

        .box_gift {
          .px(584);
          .px(10, margin-top);
        }
      }

      .match_rewards {
        .px(584);
        .px(88, height);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .px(56, margin-top);

        >div {
          .px(226);
          .px(88, height);
          background: url("../../public/img2/goodvoice/jackpo_reward_btn.png") no-repeat;
          background-size: cover;
          display: flex;
          font-family: Adobe Heiti Std;
          font-weight: bold;
          font-style: italic;
          color: #FFFFFF;
          justify-content: center;
          .px(96, line-height);
          .fs(30);

          span {
            .px(26, padding-right);
          }
        }
      }
    }

    .distinguished {
      .px(384, height);
      .px(120, margin-bottom);
      display: flex;
      flex-direction: column;

      .voice_decorate_img {
        position: absolute;
        top: 0%;
      }

      .box_jiabin {
        width: 98%;
        flex: 1;
        margin: @auto;
        display: flex;
        align-items: center;
        overflow-x: scroll;

        .list_dan {
          .px(244);
          .px(230, height);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          flex-shrink: 0;
          .px(10, margin-left);
          .px(10, margin-right);

          .header_image {
            width: 100%;
            .px(184, height);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            >img:nth-of-type(1) {
              .px(244);
              position: absolute;
              z-index: 2;
            }

            >img:nth-of-type(2) {
              .px(166);
              .px(166, height);
              border-radius: 50%;
              position: absolute;
              z-index: 1;
            }
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #FEFEFE;
            .fs(30);
          }
        }
      }

      .box_jiabin1,
      .box_jiabin2 {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .box_jiabin3,
      .box_jiabin4 {
        display: flex;
        align-items: center;
        // justify-content: center;

        .list_dan {
          .px(230);
          .px(230, height);

          .header_image {
            width: 100%;
            .px(180, height);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            >img:nth-of-type(1) {
              width: 100%;
              position: absolute;
              z-index: 2;
            }
          }
        }
      }
    }

    .AuditionTime {
      width: 100vw;
      .px(204, height);
      position: relative;
      background: url("../../public/img2/goodvoice/match_frame.png") no-repeat;
      background-size: cover;
      .px(116, margin-bottom);

      .SelectionStage {
        width: 88vw;
        .px(144, height);
        margin: @auto;
        position: absolute;
        .px(-96, top);
        left: 6vw;
        display: flex;
        justify-content: center;

        >div {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("../../public/img2/goodvoice/match_yusai_nor.png") no-repeat;
          background-size: contain;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          position: relative;

          >img {
            .px(30, height);
            opacity: 0.5;
          }

          >div {
            position: absolute;
            width: 100%;
            .px(40, height);
            text-align: center;
            font-family: PingFang SC;
            font-weight: 400;
            .fs(18);
            color: #FFFFFF50;
            transform: scale(0.65);
            .px(40, line-height);
          }

          span {
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF50;
            .fs(26);
          }
        }

        >div:first-child {
          background: url("../../public/img2/goodvoice/haixuan_nor_btn.png") no-repeat;
          background-size: contain;
        }

        >div:last-child {
          background: url("../../public/img2/goodvoice/match_zongjuesai_frame.png") no-repeat;
          background-size: contain;

          >div {
            .px(6, left);
          }
        }

        >.bg_cur1 {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("../../public/img2/goodvoice/haixuan_select_btn.png") no-repeat !important;
          background-size: contain !important;

          .time_some {
            width: 100%;
            text-align: center;
            color: #FFFFFF !important;
          }

          span {
            color: #FFFFFF !important;
          }

          >img {
            opacity: 1;
          }
        }

        >.bg_cur2,
        .bg_cur3,
        .bg_cur4 {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("../../public/img2/goodvoice/yusai_select_btn.png") no-repeat !important;
          background-size: contain !important;

          .time_some {
            width: 100%;
            text-align: center;
            color: #FFFFFF !important;
          }

          span {
            color: #FFFFFF !important;
          }

          >img {
            opacity: 1;
          }
        }

        >.bg_cur5 {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("../../public/img2/goodvoice/zongjuesai_select_btn.png") no-repeat !important;
          background-size: contain !important;

          .time_some {
            width: 100%;
            text-align: center;
            color: #FFFFFF !important;
          }

          span {
            color: #FFFFFF !important;
          }

          >img {
            opacity: 1;
          }
        }
      }

      .countDown {
        width: 88%;
        position: absolute;
        .px(30, bottom);
        left: 6%;
        .px(40, height);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;

        color: #FFF9EA;
        .fs(32);
        .px(40, margin-top);

        .van-count-down {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF9EA;
          font-family: PingFang SC;
          font-weight: 400;

          .item {
            border: 1px solid #E4BEFD;
            background: #4B0188;
            .px(10, border-radius);
            .px(6, margin-left);
            .px(6, margin-right);
            .px(54);
            .px(50, height);
            .px(54, line-height);
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
          }
        }
      }
    }

    .rank_list {
      .px(768);
      background: #34029F;
      border: 2px solid #FFFFFF;
      .px(20, border-radius);
      margin: @auto;
      .px(123, margin-bottom);
      position: relative;
      box-shadow: 3px 3px 3px #173fe5, -3px -3px 3px #173fe5;

      .top_jackpot {
        position: relative;
        z-index: 2;
        display: flex;
        .px(146, height);
        width: 100%;
        align-items: center;
        justify-content: center;
        .px(-76, margin-top);

        >img:nth-of-type(1) {
          position: absolute;
          left: -3%;
          top: 0%;
          .px(152);
        }

        >img:nth-of-type(2) {
          position: absolute;
          right: -3%;
          top: 0%;
          .px(146);
        }

        .Cumulative {
          .px(580);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            position: absolute;
            left: 0%;
            .px(130);
          }

          >img:nth-of-type(2) {
            .px(130);
            position: absolute;
            right: 0%;
          }

          >div {
            .px(410);
            .px(120, height);
            background: url("../../public/img2/goodvoice/voice_jackpo_title.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            >img {
              width: auto;
              .px(52, height);
            }
          }
        }
      }

      .voice_decorate_img {
        position: absolute;
        .px(760);
        .px(30, top);
      }

      .seach_ {
        width: 98%;
        .px(82, height);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: @auto;
        .px(34, margin-top);
        .px(48, margin-bottom);
        position: relative;

        .ipt_btn {
          // .px(552);
          .px(80, height);
          .px(40, border-radius);
          border: 1px solid #7131FB;
          background: #34029F;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .fs(26);
          color: #FFFFFF;
          .px(16, margin-right);

          >input {
            .px(394);
            flex: 1;
            .px(80, height);
            display: flex;
            align-items: center;
            flex-shrink: 0;
            border: 0;
            background: 00000000;
            .px(16, margin-left)
          }

          ::-webkit-input-placeholder {
            font-family: PingFang SC;
            font-weight: 400;
            color: #017FB9;
            .fs(26);
          }

          >.sousuo {
            flex-shrink: 0;
            .px(148);
            .px(80, height);
            background: linear-gradient(82deg, #031EC4 0%, #0BDAFF 99%);
            border: 1px solid #7131FB;
            border-radius: 40px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FEFEFE;
            .fs(30);
            text-align: center;
            .px(80, line-height);
          }
        }
      }

      .stage_ {
        .px(168);
        .px(80, height);
        border: 1px solid #9F7AFC;
        background: linear-gradient(82deg, #0190FF 1%, #BF0FF9 99%);
        border-radius: 40px;
        position: relative;

        .flei_ {
          width: 100%;
          height: 100%;
          .fs(30);
          font-family: PingFang SC;
          font-weight: 500;
          color: #FEFEFE;
          display: flex;
          align-items: center;
          justify-content: center;



          img {
            .px(42);
          }
        }
      }

      .rank_box_nth2 {
        width: 98%;
        margin: @auto;
        display: flex;
        position: relative;

        .rank_32_box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 100%;
          .px(2434, max-height);
          .px(700, min-height);
          overflow-y: scroll;

          .single_box_32 {
            .px(728);
            .px(220, height);
            .px(10, border-radius);
            .px(24, margin-bottom);
            background: linear-gradient(177deg, #6EF3FF, #F61FCD, #F61FCD, #6EF3FF);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .center_32 {
              .px(724);
              .px(216, height);
              .px(10, border-radius);
              background: #130B3F;
              display: flex;
              align-items: center;

              .header_image_box32 {
                .px(188);
                .px(196, height);
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .px(20, margin-left);
                .px(28, margin-right);

                >img:nth-of-type(1) {
                  width: 100%;
                  position: absolute;
                }

                >img:nth-of-type(2) {
                  .px(142);
                  .px(142, height);
                  border-radius: 50%;
                  position: absolute;
                }
              }

              .name_wenben_box {
                flex: 1;
                display: flex;
                flex-direction: column;

                >span {
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                  .fs(30);
                  .px(10, padding-left);
                }

                .voice_mp3 {
                  .px(284);
                  .px(46, height);
                  display: flex;
                  align-items: center;
                  .px(20, margin-top);
                  .px(22, margin-bottom);

                  >img {
                    .px(64);
                    z-index: 2;
                  }

                  >div {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    .px(46, height);
                    background: linear-gradient(74deg, rgba(65, 83, 252, 0.99) 1%, rgba(73, 81, 248, 0) 100%);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    .fs(24);
                    .px(-24, margin-left);
                    .px(10, padding-left);
                    flex-wrap: nowrap;

                    /deep/ .van-notice-bar {
                      padding: 0;
                      width: 100%;
                      height: 100%;
                      background: 00000000;
                      transform: scale(0.8);
                      .fs(24);
                      color: #fff;
                    }


                    // span {
                    //   display: inline-block;
                    //   transform: scale(0.8);
                    //   white-space: nowrap;
                    // }
                  }

                }

                .Help_voice {
                  .px(188);
                  .px(40, height);
                  display: flex;
                  align-items: center;
                  // justify-content: center;

                  >div {
                    .px(70);
                    .px(48, height);
                    .px(10, border-radius);
                    border: 1px solid #0BCCFB;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #0BCCFB;
                    .fs(24);
                    text-align: center;
                    .px(48, line-height);
                    transform: scale(0.8)
                  }

                  span {
                    .fs(28);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #71E0FB;
                    .px(10, padding-left);
                  }
                }
              }

              .btn_vote {
                .px(154);
                .px(54, height);
                .px(20, margin-right);
                background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
                box-shadow: 0px 1px 1px 0px #4CFBFA;
                .px(28, border-radius);
                .fs(28);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 1px 0px rgba(55, 5, 162, 0.4);
                .px(54, line-height);
                text-align: center;
              }

              .btn_vote2 {
                background: linear-gradient(2deg, #797979, #797979, #797979);
                box-shadow: 0px 1px 1px 0px #797979;
              }
            }

            .rank_def {
              position: absolute;
              .px(0, top);
              .px(2, left);
              width: 100%;
              .px(36, height);
              display: flex;
              align-items: center;
              justify-content: space-between;

              >div {
                background: linear-gradient(0deg, #2985FF 0%, #B912F8 100%);
                border-radius: 4px 0px 10px 0px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .fs(28);
                padding: 1px 8px;
                position: absolute;
                .px(2, top);
                .px(1, left);
              }

              span {
                .fs(28);
                font-family: PingFang SC;
                font-weight: 500;
                color: #F9ECB1;
                .px(20, padding-right);
                position: absolute;
                .px(10, top);
                .px(10, right);
              }
            }
          }
        }
      }

      .rank_box_nth3 {
        width: 98%;
        margin: @auto;
        display: flex;
        position: relative;
        display: flex;
        flex-direction: column;
        .px(700, min-height);


        .rank3_of_type {
          .px(718);
          .px(768, height);
          .px(60, margin-bottom);
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          >img {
            width: 100%;
            height: 100%;
            position: absolute;
          }

          .center_list_nor {
            width: 92%;
            margin: @auto;
            display: flex;
            justify-content: center;
            z-index: 2;
            .px(40, margin-bottom);
            .px(48, margin-left);

            >div {
              .px(18, margin-left);
              .px(18, margin-right);
            }



            .img_back {
              .px(310);
              .px(418, height);
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;

              >img:nth-of-type(1) {
                .px(310);
                position: absolute;
              }

              >div {
                .px(266);
                .px(366, height);
                border: 1px solid #FDE06E;
                z-index: 2;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;

                >img {
                  width: 100%;
                  // height: 100%;
                }
              }

            }

            .infor_list {
              display: flex;
              flex-direction: column;
              // align-items: center;

              >span:nth-of-type(1) {
                font-family: PingFang SC;
                font-weight: 500;
                color: #F9ECB1;
                .fs(60);
                text-align: center;
              }

              >span:nth-of-type(2) {
                font-family: PingFang SC;
                font-weight: 500;
                .fs(36);
                color: #FFFFFF;
                .px(22, padding-top);
                .px(24, padding-bottom);
                .px(10, padding-left);
              }

              .voice_mp3 {
                .px(284);
                .px(70, height);
                display: flex;
                align-items: center;
                overflow: hidden;
                .px(34, margin-bottom);


                >img {
                  .px(70);
                  z-index: 2;
                }

                >div {
                  display: flex;
                  align-items: center;
                  flex: 1;
                  .px(46, height);
                  background: linear-gradient(74deg, rgba(65, 83, 252, 0.99) 1%, rgba(73, 81, 248, 0) 100%);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  .fs(30);
                  .px(-24, margin-left);
                  .px(10, padding-left);
                  flex-wrap: nowrap;

                  /deep/ .van-notice-bar {
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background: 00000000;
                    transform: scale(0.8);
                    color: #fff;
                  }

                  span {
                    display: inline-block;
                    transform: scale(0.8);
                    white-space: nowrap;
                  }
                }

              }

              .Help_voice {
                // .px(166);
                // .px(40, height);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: auto;
                // .px(10,margin-left);

                >div {
                  .px(78);
                  .px(48, height);
                  .px(10, border-radius);
                  border: 1px solid #0BCCFB;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #0BCCFB;
                  .fs(30);
                  text-align: center;
                  .px(48, line-height);
                  .px(26, margin-right);
                  // transform: scale(0.8)
                }

                span {
                  .fs(34);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #71E0FB;
                  // .px(10, padding-left);
                }
              }

              .btn_vote {
                .px(220);
                .px(84, height);
                background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
                box-shadow: 0px 1px 1px 0px #4CFBFA;
                .px(68, border-radius);
                .fs(38);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 1px 0px rgba(55, 5, 162, 0.4);
                .px(84, line-height);
                .px(30, margin-top);
                text-align: center;
              }

              .btn_vote2 {
                background: linear-gradient(2deg, #797979, #797979, #797979);
                box-shadow: 0px 1px 1px 0px #797979;
              }
            }
          }

          .center_list_nor2 {
            display: flex;
            flex-direction: row-reverse;
          }

          .text_list_ {
            width: 80%;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FBF5DC;
            .fs(30);
            z-index: 2;
          }
        }
      }

      .rank_box {
        width: 98%;
        margin: @auto;
        display: flex;
        position: relative;

        .rank_100_box {
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-around;
          width: 100%;
          .px(2300, max-height);
          .px(700, min-height);
          overflow: hidden;
          overflow-y: scroll;

          .single_box {
            .px(230);
            .px(558, height);
            .px(10, border-radius);
            .px(18, margin-bottom);
            .px(10, margin-right);
            .px(10, margin-left);
            background: linear-gradient(177deg, #6EF3FF, #F61FCD, #F61FCD, #6EF3FF);
            display: flex;
            align-items: center;
            justify-content: center;

            .center_box_tank {
              .px(226);
              .px(554, height);
              background: #130B3F;
              .px(10, border-radius);
              display: flex;
              flex-direction: column;
              align-items: center;

              .pm_pingf {
                width: 100%;
                .px(36, height);
                display: flex;
                justify-content: space-between;

                >div {
                  background: linear-gradient(0deg, #2985FF 0%, #B912F8 100%);
                  border-radius: 5px 0px 10px 0px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                  .fs(28);
                  padding: 0px 8px;
                  // display: flex;
                  // align-items: center;
                  // justify-content: center;
                }

                span {
                  .fs(28);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #F9ECB1;
                  .px(20, padding-right);
                }
              }

              .box_header_bg {
                .px(188);
                .px(196, height);
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                .px(40, margin-top);

                >img:nth-of-type(1) {
                  position: absolute;
                  .px(188);
                  z-index: 2;
                }

                >img:nth-of-type(2) {
                  position: absolute;
                  .px(142);
                  .px(142, height);
                  z-index: 1;
                  border-radius: 50%;
                }
              }

              .name_slice {
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .fs(30);
                .px(10, padidng-top);
                .px(22, padidng-top);
              }

              .voice_mp3 {
                width: 88%;
                .px(64, height);
                display: flex;
                align-items: center;
                .px(14, margin-top);
                .px(22, margin-bottom);
                overflow: hidden;


                >img {
                  .px(64);
                  z-index: 2;
                }

                >div {
                  display: flex;
                  align-items: center;
                  flex: 1;
                  .px(46, height);
                  background: linear-gradient(74deg, rgba(65, 83, 252, 0.99) 1%, rgba(73, 81, 248, 0) 100%);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  .fs(24);
                  .px(-20, margin-left);
                  .px(10, padding-left);
                  flex-wrap: nowrap;

                  /deep/ .van-notice-bar {
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background: 00000000;
                    transform: scale(0.8);
                    .fs(24);
                    color: #fff;
                  }

                  span {
                    display: inline-block;
                    transform: scale(0.8);
                    white-space: nowrap;
                  }
                }

              }

              .Help_voice {
                width: 78%;
                .px(40, height);
                display: flex;
                align-items: center;
                justify-content: center;

                >div {
                  .px(70);
                  .px(48, height);
                  .px(10, border-radius);
                  border: 1px solid #0BCCFB;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #0BCCFB;
                  .fs(24);
                  text-align: center;
                  .px(48, line-height);
                  transform: scale(0.8)
                }

                span {
                  .fs(28);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #71E0FB;
                  .px(10, padding-left);
                }
              }

              .btn_vote {
                .px(154);
                .px(54, height);
                margin: @auto;
                .px(20, margin-top);
                background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
                box-shadow: 0px 1px 1px 0px #4CFBFA;
                .px(28, border-radius);
                .fs(28);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 1px 0px rgba(55, 5, 162, 0.4);
                .px(54, line-height);
                text-align: center;
              }

              .btn_vote2 {
                background: linear-gradient(2deg, #797979, #797979, #797979);
                box-shadow: 0px 1px 1px 0px #797979;
              }
            }
          }

          .single_boxstep1 {
            .px(408, height);

            .center_box_tank {
              .px(404, height);
            }
          }
        }


      }
    }
  }

  .tab_ui {
    .px(160);
    .px(172, height);
    .px(10, border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .active_xuanzhong {
      font-family: PingFang SC;
      font-weight: bold;
      color: #5433FE;
      .fs(30);
    }

    >div {
      width: 100%;
      height: 40%;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      .fs(26);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        .px(10, padding-left);
        .px(28)
      }

    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
  }

  .block {
    width: 100vw;
    display: flex;
    position: relative;

    .close {
      .px(56);
      .px(56, height);
      margin: @auto;
      display: flex;
      position: absolute;
      .px(68, right);
      .px(-150, top);
      z-index: 2;

      >img {
        margin-left: auto;
        .px(56);
      }
    }

    .center_rule {
      .px(688);
      margin: @auto;
      background: #34029F;
      border: 2px solid #FFFFFF;
      .px(20, border-radius);
      margin: @auto;
      position: relative;
      box-shadow: 3px 3px 3px #173fe5, -3px -3px 3px #173fe5;

      .top_jackpot {
        position: relative;
        z-index: 1;
        display: flex;
        .px(146, height);
        width: 100%;
        align-items: center;
        justify-content: center;
        .px(-76, margin-top);

        >img:nth-of-type(1) {
          position: absolute;
          left: -10%;
          top: 0%;
          .px(152);
        }

        >img:nth-of-type(2) {
          position: absolute;
          right: -10%;
          top: 0%;
          .px(146);
        }

        .Cumulative {
          .px(580);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            position: absolute;
            left: 0%;
            .px(130);
          }

          >img:nth-of-type(2) {
            .px(130);
            position: absolute;
            right: 0%;
          }

          >div {
            .px(410);
            .px(120, height);
            background: url("../../public/img2/goodvoice/voice_jackpo_title.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            >img {
              .px(176)
            }
          }
        }
      }

      .voice_decorate_img {
        position: absolute;
        .px(688);
        top: 0%;
      }

      .center_rule_message {
        .px(600);
        margin: @auto;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;


        .wenben_mss {
          .px(550);
          margin: @auto;
          display: flex;
          flex-direction: column;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(30);
        }

        .image_erwm {
          .px(242);
          .px(242, height);
          .px(58, margin-top);
          .px(38, margin-bottom);

          >img {
            width: 100%;
          }
        }

        .contact_kefu {
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(28);
        }

        .copy_kefu {
          display: flex;
          align-items: center;
          width: 100%;
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .px(32, margin-top);
          .px(34, margin-bottom);
          justify-content: center;

          >img {
            .px(22);
            .px(20, padding-left);
          }
        }
      }

      .mode_type2 {
        .px(424, height);
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

        >span {
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(30);
          .px(50, line-height);
        }

        >span:first-child {
          .px(90, margin-top)
        }
      }

      .mode_type3 {
        width: 100%;
        .px(800, height);
        overflow-y: scroll;
        position: relative;
        z-index: 10;

        .rangk_01 {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .bg_rank {
            .px(232);
            .px(86, height);

            >img {
              width: 100%;
            }
          }

          .bg_rank2 {
            .px(378);
            .px(66, height);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            >img {
              position: absolute;
              width: 100%;
            }

            span {
              .fs(36);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FBF5DC;
              z-index: 2;
            }
          }

          .gift_num_list {
            width: 100%;
            display: flex;
            justify-content: center;
            .px(60, margin-top);
            .px(44, margin-bottom);
            flex-wrap: wrap;
          }

          .list_num {
            .px(166);
            .px(250, height);
            display: flex;
            flex-direction: column;
            justify-content: center;
            .px(20, margin-left);
            .px(20, margin-right);


            .nor_gift {
              .px(166);
              .px(166, height);
              background: url("../../public/img2/goodvoice/gift_frame.png") no-repeat;
              background-size: cover;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              flex-shrink: 0;


              >img {
                .px(88,height);
              }

              .xiand {
                .px(48);
                .px(48, height);
                position: absolute;
                .px(10, top);
                .px(10, right);
                border-radius: 50%;
                background: #FE69E6;
                text-align: center;
                .px(48, line-height);
                .fs(22);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FBF5DC;
                transform: scale(0.8);
              }
            }

            .name_gift {
              .px(10, padding-top);
              width: 100%;
              flex: 1;
              font-family: PingFang SC;
              font-weight: 400;
              color: #FBF5DC;
              .fs(24);
              text-align: center;
              display: flex;
              flex-direction: column;
            }

          }

          .list_num2 {
            .px(1, margin-left);
            .px(1, margin-right);
          }
        }
      }

      .mode_type4 {
        width: 76%;
        .px(720, height);
        margin: @auto;
        .px(30, margin-top);
        display: flex;
        position: relative;
        overflow-y: scroll;

        .progress {
          .px(10);
          .px(770, height);
          background: #FBF5DC50;
          .px(5, border-radius);
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 10px;

          >div {
            .px(28);
            .px(28, height);
            background: #FBF5DC40;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            .px(96, margin-top);

            >div {
              .px(14);
              .px(14, height);
              border-radius: 50%;
              background: #FBF5DC;
            }
          }

          >div:nth-of-type(1) {
            .px(44, margin-top)
          }
        }

        .rule_text {
          display: flex;
          flex-direction: column;
          flex: 1;
          .px(40, margin-left);

          .cengci1 {
            .px(44, margin-top);
          }

          .cengci {
            display: flex;
            flex-direction: column;
            .px(30, margin-bottom);

            >img {
              .px(80);
              .px(30, height);
              .px(24, margin-bottom);
            }

            >span {
              font-family: PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              .fs(30);
            }

          }

          .cengci:nth-of-type(6) {
            >img {
              .px(150);
              .px(30, height);
              .px(24, margin-bottom);
            }
          }
        }
      }

      .mode_type5 {
        width: 76%;
        margin: @auto;
        .px(780, height);
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        position: relative;

        .rank_pangm {
          display: flex;
          flex-direction: column;
          align-items: center;
          .px(30, margin-top);
          .px(48, line-height);
          text-align: center;

          >img {
            width: auto;
            .px(30, height);
            .px(30, margin-bottom);
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            .fs(30);
          }
        }
      }
    }
  }

  .buy_ {
    .px(616);
    .px(526, height);
    background: #FDFEFE;
    .px(16, border-radius);
    position: relative;

    .close {
      .px(56);
      .px(56, height);
      margin: @auto;
      display: flex;
      position: absolute;
      .px(-20, right);
      .px(-120, top);
      z-index: 2;

      >img {
        margin-left: auto;
        .px(56);
      }
    }

    .center_modelo {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .heder_top {
        width: 100%;
        .px(146, height);
        text-align: center;
        .px(146, line-height);
        font-family: PingFang SC;
        font-weight: 500;
        color: #010101;
        .fs(34);
      }

      >span:nth-of-type(1) {
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        .fs(28);
        .px(32, padding-bottom);
      }

      .Stepper {
        width: 80%;
        .px(80, height);
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_step {
          display: flex;
          align-items: center;

          .stepp {
            .px(80);
            .px(80, height);
            background: #476EFD;
            .px(10, border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            .fs(50);
            font-weight: 400;
          }

          .ipt_a {
            .px(160);
            .px(80, height);
            background: #476EFD12;
            .px(10, border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            .px(14, margin-left);
            .px(14, margin-right);

            >input {
              width: 88%;
              height: 80%;
              font-family: PingFang SC;
              font-weight: 500;
              color: #666666;
              .fs(30);
              border: 0;
              background: 00000000;
              text-align: center;
            }
          }
        }

        .right_all {
          .px(128);
          .px(80, height);
          .px(10, border-radius);
          background: #476EFD;
          text-align: center;
          .px(80, line-height);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(28);
        }

      }

      .spend_zuans {
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        .fs(28);
        .px(32, padding-top);

        >span {
          color: #476EFD
        }
      }

      .surplus_ {
        position: absolute;
        .px(20, bottom);
        width: 88%;
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .syu_zuans {
          display: flex;
          .px(80, height);
          align-items: center;

          >div:nth-of-type(1) {
            .px(138);
            .px(60, height);
            text-align: center;
            .px(60, line-height);
            font-family: PingFang SC;
            font-weight: 400;
            color: #0336F0;
            .fs(24);
            background: #C7DCFC;
            .px(10, border-radius);
            transform: scale(0.8);
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            .fs(28);
            .px(10, padding-right);
          }

          >div:nth-of-type(2) {
            .px(46);
            .px(46, height);
            text-align: center;
            font-family: PingFang SC;
            font-weight: 400;
            color: #fff;
            .fs(40);
            background: #C186FA;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .quer_ipt {
          .px(198);
          .px(78, height);
          background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
          -webkit-box-shadow: 0px 1px 1px 0px #4cfbfa;
          box-shadow: 0px 1px 1px 0px #4cfbfa;
          border-radius: 8.21vw;
          font-size: 4.59vw;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-shadow: 0px 1px 0px rgb(55 5 162 / 40%);
          text-align: center;
          .px(78, line-height);
        }
      }
    }
  }

  .vote_toppiao {
    .px(616);
    .px(526, height);
    background: #FDFEFE;
    .px(16, border-radius);
    position: relative;

    .close {
      .px(56);
      .px(56, height);
      margin: @auto;
      display: flex;
      position: absolute;
      .px(-20, right);
      .px(-120, top);
      z-index: 2;

      >img {
        margin-left: auto;
        .px(56);
      }
    }

    .center_vote {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .heder_top {
        width: 100%;
        .px(160, height);
        text-align: center;
        .px(160, line-height);
        font-family: PingFang SC;
        font-weight: 400;
        color: #010101;
        .fs(30);
      }

      .ipt_num {
        width: 88%;
        margin: @auto;
        .px(80, height);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ipt_ba {
          .px(390);
          .px(80, height);
          background: #476EFD12;
          .px(10, border-radius);
          display: flex;
          align-items: center;
          justify-content: center;

          input {
            width: 90%;
            height: 80%;
            border: 0;
            background: 00000000;
            .fs(28);
          }

          ::-webkit-input-placeholder {
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            .fs(28);
          }

        }

        .btn_all {
          .px(128);
          .px(80, height);
          background: #476EFD;
          .px(10, border-radius);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(28);
          text-align: center;
          .px(80, line-height);
        }
      }

      .all_surplus {
        width: 88%;
        margin: @auto;
        .px(48, margin-top);
        display: flex;
        justify-content: space-between;

        >span {
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }

        >div {
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #476EFD;
        }
      }

      .btn_determine {
        .px(240);
        .px(88, height);
        margin: @auto;
        .px(70, margin-top);
        background: url("../../public/img2/goodvoice/list_vote_btn.png") no-repeat;
        background-size: cover;
        text-align: center;
        .px(88, line-height);
        .fs(34);
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-shadow: 0px 3px 0px rgba(55, 5, 162, 0.4);
      }
    }

  }

  .not_list {
    .px(700, height);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FDFDFD;
    .fs(26);
  }

  /deep/ .van-popup {
    overflow: initial;
    background: 00000000;
  }
</style>